<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
		<link type="text/css" href="css/main.css" rel="stylesheet">
		<title>摇一摇</title>
		<!--[if lt IE 8]>      <![endif]-->
		<noscript></noscript>
	</head>
	<body>
		<!-- 主页  -->
		<div id="contain">
			<!-- logo  -->
			<div id="logoArea">
				<img src="img/rock.jpg"  id="rocklogo" class="animation-logo" />
			</div>
			<!-- 内容  -->
			<div id="welcome">
				<!-- title  -->
				<div id="welcomeTitle">
					摇&nbsp;&nbsp;一&nbsp;&nbsp;摇
				</div>
				<!-- 介绍  -->
				<div id="welcomeIntroduce">
					support: android 2.2+ IOS 4.0+ windowsPhone 8.0+(内置浏览器IE 11+) 最小摇动距离：30px 停止次数：30次
				</div>
				<!-- PC引导  -->
				<div id="welcomePC">
					PC: 请扫码
					<br />
					<img src="img/href.png" />
				</div>
				<!-- 开始按钮  -->
				<div id="welcomeStart" >
					<label id="rockstart" class="btnArea" onclick="userock()">点击开始</label>
				</div>
				<!-- 不支持属性 提示  -->
				<div id="welcomeSorry">

				</div>
				<!-- 检测开始  -->
				<div id="welcomeMobile">
					<p>
						左右：<span id="alpha">0</span>
					</p>
					<p>
						次数：<span id="times">0</span>
					</p>
					<p>
						速度：<span id="speed">0</span>
					</p>
					<p>
						最大速度：<span id="mspeed">0</span>
					</p>
					<p>
						平均速度：<span id="aspeed">0</span>
					</p>
					<p>
						状态：<span id="state">0</span>
					</p>
				</div>
				<!-- 重置 -->
				<div id="welcomeRestart">
					<label id="rockstart" class="btnArea" onclick="rockrestart()">重新开始</label>
				</div>
				<!-- 页尾  -->
				<div id="welcomeFooter">
					@pptest
				</div>
			</div>
		</div>
		<script src="js/rock.js"></script>
		<script>
			rock.DomReady(function() {
				//PC 检测
				if (rock.isPc()) {
					welcomePC.style.display = 'block';
				} else {
					//设备属性支持 检测
					if (rock.test()) {
						welcomeStart.style.display = 'block';
					} else {
						welcomeSorry.style.display = 'block';
						if (window.ActiveXObject) {
							var ua = navigator.userAgent.toLowerCase();
							welcomeSorry.innerHTML = '对不起，您的IE:' + ua.match(/msie ([\d.]+)/)[1] + '不支持该功能';
						} else
							welcomeSorry.innerHTML = '对不起，您的浏览器不支持该功能';
					}
				}

			})
			//重置
			function rockrestart() {
				rock.restart(rockcallbackfn);
				welcomeRestart.style.display = 'none';
				welcomeMobile.style.display = 'block';
			}

			//检测开始
			function userock() {
				welcomeStart.style.display = 'none';
				welcomeMobile.style.display = 'block';
				//最小移动距离
				rock(30).start(rockcallbackfn);
				//摇动后 callback
			}

			//检测回调
			function rockcallbackfn(result) {
				if (result.times >= 30) {
					//停止摇动检测
					rock(30).stop();
					welcomeMobile.style.display = 'none';
					welcomeRestart.style.display = 'block';
					alert('30次啦');
				} else {
					alpha.innerHTML = result.Alpha;
					times.innerHTML = result.times;
					speed.innerHTML = result.speed;
					mspeed.innerHTML = result.maxSpeed;
					aspeed.innerHTML = result.aveSpeed;
					//状态获取
					switch(result.state) {
						case 1:
							state.innerHTML = "摇动"
							break;
						case 0:
							state.innerHTML = "静止"
							break;
						case -1:
							state.innerHTML = "幅度不够"
					}
				}
			}

		</script>
	</body>
</html>